<template>
  <el-dialog top="20vh" :visible.sync="dialogVisible" :title="titleMap[type]" @close='close' width="900px">
    <!--注册证书详情-->
    <div v-if="type==='regCert'">
      <h2 class="cerInfo_title">证书信息</h2>
      <ul class="cerInfo_list clearfix">
        <li>
          <label>人员姓名</label>
          <span>{{data.cerInfoName}}</span>
        </li>
        <li>
          <label>身份证</label>
          <span>{{data.cerInfoId}}</span>
        </li>
        <li>
          <label>资质类别</label>
          <span>{{data.cerInfoType}}</span>
        </li>
        <li>
          <label>资格专业</label>
          <span>{{data.cerInfoExplain}}</span>
        </li>
        <li>
          <label>注册号(执业印章号)</label>
          <span>{{data.cerInfoPhone}}</span>
        </li>
        <li>
          <label>证书编号</label>
          <span>{{data.cerInfoNumber}}</span>
        </li>
        <li>
          <label>注册日期</label>
          <span>{{data.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>注册有效期截止</label>
          <span>{{data.cerInfoEndTime}}</span>
        </li>
        <li>
          <label>证书状态</label>
          <span>{{data.cerInfoZt}}</span>
        </li>
        <li>
          <label>证书所在单位</label>
          <span>{{data.cerInfoUnit}}</span>
        </li>
      </ul>
      <h2 class="cerInfo_title">电子证书</h2>
      <ul class="cerInfo_book">
        <li class="clearfix">
          <div class="">8.jpg</div>
          <div class="text-center">876.23KB</div>
          <div class="text-right"><a href="javascript:;">下载</a><a href="javascript:;">预览</a></div>
        </li>
      </ul>
    </div>
    <!--职称证书详情-->
    <div v-if="type==='titleCert'">
      <h2 class="cerInfo_title">证书信息</h2>
      <ul class="cerInfo_list clearfix">
        <li>
          <label>人员姓名</label>
          <span>{{popData.cerInfoName}}</span>
        </li>
        <li>
          <label>身份证</label>
          <span>{{popData.cerInfoId}}</span>
        </li>
        <li>
          <label>证书编号</label>
          <span>{{popData.cerInfoNumber}}</span>
        </li>
        <li>
          <label>职称类别</label>
          <span>{{popData.cerInfoType}}</span>
        </li>
        <li>
          <label>职称等级</label>
          <span>中级</span>
        </li>
        <li>
          <label>职称专业</label>
          <span>{{popData.cerInfoExplain}}</span>
        </li>
        <li>
          <label>批准日期</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>取得时所在单位</label>
          <span>{{popData.cerInfoUnit}}</span>
        </li>
        <li>
          <label>发证机关</label>
          <span>{{popData.cerInfoZt}}</span>
        </li>
        <li>
          <label>发证日期</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>继续教育有效期止</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
      </ul>
      <h2 class="cerInfo_title">证书附件</h2>
      <ul class="cerInfo_book">
        <li class="clearfix">
          <div class="">8.jpg</div>
          <div class="text-center">876.23KB</div>
          <div class="text-right"><a href="javascript:;">下载</a><a href="javascript:;">预览</a></div>
        </li>
      </ul>
    </div>
    <!--安全三类证书-->
    <div v-if="type==='safeCert'">
      <h2 class="cerInfo_title">证书信息</h2>
      <ul class="cerInfo_list clearfix">
        <li>
          <label>人员姓名</label>
          <span>{{popData.cerInfoName}}</span>
        </li>
        <li>
          <label>身份证</label>
          <span>{{popData.cerInfoId}}</span>
        </li>
        <li>
          <label>证书编号</label>
          <span>{{popData.cerInfoNumber}}</span>
        </li>
        <li>
          <label>证书状态</label>
          <span class="red">异常状态</span>
        </li>
        <li>
          <label>发证机关</label>
          <span>{{popData.cerInfoZt}}</span>
        </li>
        <li>
          <label>首次取得资格时间</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>资格有效期截止</label>
          <span>{{popData.cerInfoEndTime}}</span>
        </li>
        <li>
          <label>发证日期</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li style="width: 100%">
          <label>异常原因</label>
          <span class="red">证书所在打完与系统登记的聘用打完不一致,个人发起执业企业变更审批通过后即可恢复正常使用</span>
        </li>
      </ul>
    </div>
    <!--专业岗位证书-->
    <div v-if="type==='profeCert'">
      <h2 class="cerInfo_title">证书信息</h2>
      <ul class="cerInfo_list clearfix">
        <li>
          <label>人员姓名</label>
          <span>{{popData.cerInfoName}}</span>
        </li>
        <li>
          <label>身份证</label>
          <span>{{popData.cerInfoId}}</span>
        </li>
        <li>
          <label>证书编号</label>
          <span>{{popData.cerInfoNumber}}</span>
        </li>
        <li>
          <label>资格状态</label>
          <span>{{popData.cerInfoType}}</span>
        </li>
        <li>
          <label>资格类别</label>
          <span>施工员</span>
        </li>
        <li>
          <label>资格专业</label>
          <span>{{popData.cerInfoExplain}}</span>
        </li>
        <li>
          <label>发证日期</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>发证机关</label>
          <span>{{popData.cerInfoZt}}</span>
        </li>
        <li>
          <label>首次取得资格时间</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>资格有效期截止</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
      </ul>
      <h2 class="cerInfo_title">证书附件</h2>
      <ul class="cerInfo_book">
        <li class="clearfix">
          <div class="">8.jpg</div>
          <div class="text-center">876.23KB</div>
          <div class="text-right"><a href="javascript:;">下载</a><a href="javascript:;">预览</a></div>
        </li>
      </ul>
    </div>
    <!--技术工人证书-->
    <div v-if="type==='techCert'">
      <h2 class="cerInfo_title">证书信息</h2>
      <ul class="cerInfo_list clearfix">
        <li>
          <label>人员姓名</label>
          <span>{{popData.cerInfoName}}</span>
        </li>
        <li>
          <label>身份证</label>
          <span>{{popData.cerInfoId}}</span>
        </li>
        <li>
          <label>资格类别</label>
          <span>{{popData.cerInfoType}}</span>
        </li>
        <li>
          <label>技术等级</label>
          <span>高级工</span>
        </li>
        <li>
          <label>证书编号</label>
          <span>{{popData.cerInfoNumber}}</span>
        </li>
        <li>
          <label>资格状态</label>
          <span>{{popData.cerInfoExplain}}</span>
        </li>
        <li>
          <label>发证日期</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>发证机关</label>
          <span>{{popData.cerInfoZt}}</span>
        </li>
        <li>
          <label>首次取得资格日期</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>证书有效期截止</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
      </ul>
    </div>
    <!--特种作业证书-->
    <div v-if="type==='SpeCert'">
      <h2 class="cerInfo_title">证书信息</h2>
      <ul class="cerInfo_list clearfix">
        <li>
          <label>人员姓名</label>
          <span>{{popData.cerInfoName}}</span>
        </li>
        <li>
          <label>身份证</label>
          <span>{{popData.cerInfoId}}</span>
        </li>
        <li>
          <label>证书编号</label>
          <span>{{popData.cerInfoNumber}}</span>
        </li>
        <li>
          <label>证书状态</label>
          <span>{{popData.cerInfoType}}</span>
        </li>
        <li>
          <label>资格类别</label>
          <span>施工员</span>
        </li>
        <li>
          <label>发证机关</label>
          <span>{{popData.cerInfoZt}}</span>
        </li>
        <li>
          <label>初次领证日期</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>复核有效期至</label>
          <span>{{popData.cerInfoEndTime}}</span>
        </li>

        <li>
          <label>使用期自</label>
          <span>{{popData.cerInfoStartTime}}</span>
        </li>
        <li>
          <label>使用期至</label>
          <span>{{popData.cerInfoEndTime}}</span>
        </li>
      </ul>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: "popView",
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    visible: Boolean,
    type: String
  },
  data() {
    return {
      dialogVisible: false,
      titleMap: {
        regCert:"注册证书详情",
        titleCert:"职称证书详情",
        safeCert:"安全三类证书详情",
        profeCert:"专业岗位证书详情",
        techCert:"技术工人证书详情",
        SpeCert:"特种作业证书详情"
      }
    }
  },
  mounted() {

  },
  watch: {
    visible: {
      handler(v) {
        this.dialogVisible = v;
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    close() {
      this.dialogVisible = false;
      this.$emit("update:visible", false)
    }
    // close(){
    //   this.$emit('update:visible',true)
    // },
    // open(){
    //   this.visible=true
    // }
  }
}
</script>

<style lang="less" scoped>
  .red{
    color: #f00 !important;
  }
</style>
